{"ast":null,"code":"import _slicedToArray from\"/Users/poppie/Desktop/development/messenger/app/frontend/node_modules/@babel/runtime/helpers/esm/slicedToArray.js\";import React from'react';import{convertCurrentTime}from\"../../utils/helpers\";import classNames from\"classnames\";import'./AudioMessage.scss';import{jsx as _jsx}from\"react/jsx-runtime\";import{jsxs as _jsxs}from\"react/jsx-runtime\";var AudioMessage=function AudioMessage(_ref){var content=_ref.content,_ref$isMe=_ref.isMe,isMe=_ref$isMe===void 0?false:_ref$isMe,_ref$replyStatus=_ref.replyStatus,replyStatus=_ref$replyStatus===void 0?false:_ref$replyStatus;var _React$useState=React.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isPlaying=_React$useState2[0],setIsPlaying=_React$useState2[1];var audioElem=React.useRef(null);var _React$useState3=React.useState(0),_React$useState4=_slicedToArray(_React$useState3,2),progress=_React$useState4[0],setProgress=_React$useState4[1];var _React$useState5=React.useState(0),_React$useState6=_slicedToArray(_React$useState5,2),currentTime=_React$useState6[0],setCurrentTime=_React$useState6[1];React.useEffect(function(){if(audioElem.current){audioElem.current.addEventListener('playing',function(){setIsPlaying(true);},false);audioElem.current.addEventListener('ended',function(){setIsPlaying(false);setProgress(0);setCurrentTime(0);},false);audioElem.current.addEventListener('pause',function(){setIsPlaying(false);},false);audioElem.current.addEventListener('timeupdate',function(){var duration=audioElem.current&&audioElem.current.duration||0;audioElem.current&&setCurrentTime(audioElem.current.currentTime);audioElem.current&&setProgress(audioElem.current.currentTime/duration*100);});}},[audioElem,content]);var togglePlay=function togglePlay(){if(!isPlaying&&audioElem.current){audioElem.current.play();}else if(isPlaying&&audioElem.current){audioElem.current.pause();}};return/*#__PURE__*/_jsxs(\"div\",{className:classNames('message__audio',{'message__audio--isMe':isMe&&!replyStatus}),children:[/*#__PURE__*/_jsx(\"audio\",{ref:audioElem,src:content.link,preload:\"auto\"}),/*#__PURE__*/_jsx(\"div\",{className:\"message__audio-progress\",style:{width:progress+'%'}}),/*#__PURE__*/_jsxs(\"div\",{className:\"message__audio-info\",children:[/*#__PURE__*/_jsx(\"div\",{className:\"message__audio-btn\",children:/*#__PURE__*/_jsx(\"button\",{className:classNames({'btn-play':!isPlaying,'btn-pause':isPlaying}),onClick:togglePlay})}),/*#__PURE__*/_jsx(\"div\",{className:\"message__audio-wave\"}),/*#__PURE__*/_jsx(\"span\",{className:\"message__audio-duration\",children:convertCurrentTime(currentTime)})]})]});};export default AudioMessage;","map":{"version":3,"names":["React","convertCurrentTime","classNames","AudioMessage","content","isMe","replyStatus","useState","isPlaying","setIsPlaying","audioElem","useRef","progress","setProgress","currentTime","setCurrentTime","useEffect","current","addEventListener","duration","togglePlay","play","pause","link","width"],"sources":["/Users/poppie/Desktop/development/messenger/app/frontend/src/components/AudioMessage/index.tsx"],"sourcesContent":["import React from 'react';\nimport {AudioMessageProps} from \"../../models/props/AudioMessageProps\";\nimport {convertCurrentTime} from \"../../utils/helpers\";\nimport classNames from \"classnames\";\nimport './AudioMessage.scss';\n\nconst AudioMessage: React.FC<AudioMessageProps> = ({content, isMe = false, replyStatus = false}) => {\n    const [isPlaying, setIsPlaying] = React.useState<boolean>(false);\n    const audioElem = React.useRef<HTMLAudioElement>(null);\n    const [progress, setProgress] = React.useState<number>(0);\n    const [currentTime, setCurrentTime] = React.useState<number>(0);\n\n    React.useEffect(() => {\n        if (audioElem.current) {\n            audioElem.current.addEventListener(\n                'playing',\n                () => {\n                    setIsPlaying(true);\n                }, false\n            );\n            audioElem.current.addEventListener(\n                'ended',\n                () => {\n                    setIsPlaying(false);\n                    setProgress(0);\n                    setCurrentTime(0);\n                }, false\n            );\n            audioElem.current.addEventListener(\n                'pause',\n                () => {\n                    setIsPlaying(false);\n                }, false\n            );\n            audioElem.current.addEventListener('timeupdate', () => {\n                const duration = (audioElem.current && audioElem.current.duration) || 0;\n                audioElem.current && setCurrentTime(audioElem.current.currentTime);\n                audioElem.current && setProgress((audioElem.current.currentTime / duration) * 100);\n            });\n        }\n    }, [audioElem, content]);\n\n    const togglePlay = () => {\n        if (!isPlaying && audioElem.current) {\n            audioElem.current.play();\n        } else if (isPlaying && audioElem.current) {\n            audioElem.current.pause();\n        }\n    }\n\n    return (\n        <div className={classNames('message__audio', {'message__audio--isMe': isMe && !replyStatus})}>\n            <audio ref={audioElem} src={content.link} preload='auto'/>\n            <div className=\"message__audio-progress\"  style={{width: progress + '%'}}/>\n            <div className=\"message__audio-info\">\n                <div className=\"message__audio-btn\">\n                    <button className={classNames({\n                        'btn-play': !isPlaying,\n                        'btn-pause': isPlaying\n                    })} onClick={togglePlay} />\n                </div>\n                <div className=\"message__audio-wave\" />\n                <span className=\"message__audio-duration\">{convertCurrentTime(currentTime)}</span>\n            </div>\n        </div>\n    );\n}\n\nexport default AudioMessage;"],"mappings":"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"},"metadata":{},"sourceType":"module"}